<template>
  <div>
    <el-table   :data="tableData1" style="width: 100%">

      
      <el-table-column
      v-if="num.length > 0"
        v-for="(item, index) in num"
         width="100"
         center >
        <template slot-scope="scope">
          <div class="time">{{ tableData[index].date }}</div>
         <div>{{ tableData[index].dayOfWeek}}</div>
          <div :class="{'negative': item < 0, 'positive':item >= 0}">
            {{ item }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: Array,
      required: true
    },
    num: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      tableData1:[1]
    };
  },
  created() {
    this.initTableData();
  },
  methods: {
    initTableData() {
      this.tableData = this.time.map((date, index) => {
        const dayOfWeek = new Date(date).toLocaleDateString('zh-CN', { weekday: 'long' });
        return {
          date: date,
          dayOfWeek: dayOfWeek,
          change: this.num[index]
        };
      });
    }
  }
};
</script>

<style scoped>
.negative {
  background-color: green;
  color: white;
  padding: 5px;
  border-radius: 5px;
}

.positive {
  background-color: red;
  color: white;
  padding: 5px;
  border-radius: 5px;
}
</style>